<template>
    <div id="app" style="background-color: white;padding: 5px">
        <div style="margin: 5px 0 20px 0;">
            <a-button v-if="$auth('sys_user_edit')" type="primary" @click="genOne()" style="float: right">
                新增
            </a-button>
        </div>
        <a-table
                :columns="columns"
                :data-source="tableData"
                :pagination="pagination"
                :loading="loading"
        >
            <span slot="action" slot-scope="text, record">
        <template>
          <div>
            <a-button
                    style="margin-left: 8px"
                    type="danger"
                    @click="delUser(record.id)"
            >
              删除
            </a-button>
          </div>
        </template>
      </span>
        </a-table>
    </div>
</template>
<script>
  import {secretPages,saveSecret,delSecret,genKey} from '@/api/application'
  import { axios } from '@/utils/request'
  export default {
    name: 'index',
    components:{

    },
    data(){
      return {
        tableData: [],
        loading: false,
        visible: false,
        ids: [],
        columns: [
          {
            title: '应用Id',
            dataIndex: 'applicationId'
          },
          {
            title: '应用Key',
            dataIndex: 'appKey'
          },
          {
            title: '应用密钥',
            dataIndex: 'appSecret'
          },
          {
            title: '创建时间',
            dataIndex: 'updateDate'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'}
          }
        ],
        searchForm:{
          pageNo: 1,
          pageSize: 10,
          applicationId:'',
        },
        submitForm:{
          applicationId:'',
          appKey: '',
          appSecret:'',
        },
        pagination: {
          total: 0,
          defaultPageSize: 10, // 每页中显示10条数据
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50', '100'], // 每页中显示的数据
          showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
        }
      }
    },
    watch: {
      $route: {
        handler: function(val, oldVal){
          // console.log(val);
          this.getKey();
        }
      }
    },
    mounted() {
      this.getKey();
    },
    methods:{
      getKey(){
        this.searchForm.applicationId = this.$route.query.id
        this.submitForm.applicationId = this.$route.query.id
        this.submitForm.appKey = this.$route.query.key
        // console.log(this.submitForm)
        this.initData();
      },
      initData(){
        this.loading = true
        secretPages(this.searchForm).then(response => {
          this.tableData = response.data.content
          this.loading = false
        })
      },
      genOne(){
        if(this.submitForm.appKey == null || this.submitForm.appKey ==''){
          this.$message.error('保存异常,请返回上一级重试')
          return;
        }
        genKey().then(response => {
          this.submitForm.appSecret = response.data
          saveSecret(this.submitForm).then(response =>{
            this.$message.success('保存成功')
            this.initData()
          })
          console.log(response.data)
        })

      },
      delUser(id){
        const _this = this;
        _this.$confirm({
          title: '确认删除',
          content: '删除后将不可恢复',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            _this.ids.push(id)
            delSecret(_this.ids).then(res => {
              if (res.code === '0') {
                _this.$message.success('删除成功')
                _this.initData()
              } else {
                _this.$message.error(res.message)
              }
              _this.ids = []
            })
          },
          onCancel() {
            this.ids = []
          }
        })
      }
    },
  }
</script>
